<template>
  <div class="theme-toggle">
    <!-- 简单切换按钮 -->
    <button
      @click="themeStore.toggleDark()"
      class="theme-toggle-btn"
      :title="isDark ? '切换到浅色模式' : '切换到深色模式'"
    >
      <div class="toggle-icon-container">
        <i 
          :class="[
            'fa',
            isDark ? 'fa-moon-o' : 'fa-sun-o',
            'toggle-icon'
          ]"
        ></i>
      </div>
    </button>

    <!-- 高级主题选择器（可选） -->
    <div v-if="showAdvanced" class="theme-selector">
      <div class="theme-options">
        <button
          v-for="option in themeOptions"
          :key="option.value"
          @click="themeStore.setTheme(option.value)"
          :class="[
            'theme-option',
            { 'active': themeStore.theme === option.value }
          ]"
          :title="option.label"
        >
          <i :class="['fa', option.icon]"></i>
          <span class="theme-label">{{ option.label }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useThemeStore } from '../stores/theme'

interface Props {
  showAdvanced?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showAdvanced: false
})

const themeStore = useThemeStore()
const isDark = computed(() => themeStore.isDark)

const themeOptions = [
  { value: 'light' as const, label: '浅色', icon: 'fa-sun-o' },
  { value: 'dark' as const, label: '深色', icon: 'fa-moon-o' },
  { value: 'system' as const, label: '跟随系统', icon: 'fa-desktop' }
]
</script>

<style scoped>
.theme-toggle {
  @apply relative;
}

.theme-toggle-btn {
  @apply relative w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 
         border-2 border-gray-300 dark:border-gray-600
         hover:bg-gray-300 dark:hover:bg-gray-600
         focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50
         transition-all duration-300 ease-in-out
         shadow-md hover:shadow-lg;
}

.toggle-icon-container {
  @apply flex items-center justify-center w-full h-full;
}

.toggle-icon {
  @apply text-xl text-gray-700 dark:text-gray-200 
         transition-all duration-500 ease-in-out;
  transform-origin: center;
}

.theme-toggle-btn:hover .toggle-icon {
  @apply scale-110;
}

/* 主题选择器样式 */
.theme-selector {
  @apply absolute top-full right-0 mt-2 z-50;
}

.theme-options {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700
         p-2 min-w-max;
}

.theme-option {
  @apply flex items-center space-x-2 w-full px-3 py-2 rounded-md
         text-sm text-gray-700 dark:text-gray-200
         hover:bg-gray-100 dark:hover:bg-gray-700
         transition-colors duration-200;
}

.theme-option.active {
  @apply bg-primary text-white;
}

.theme-label {
  @apply whitespace-nowrap;
}

/* 动画效果 */
@keyframes rotate-in {
  from {
    transform: rotate(-180deg) scale(0.8);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.toggle-icon {
  animation: rotate-in 0.3s ease-out;
}

/* 深色模式特定样式 */
.dark .theme-toggle-btn {
  @apply shadow-gray-900/20;
}

.dark .theme-toggle-btn:hover {
  @apply shadow-gray-900/30;
}
</style>